<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条料冲剪计算器</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        
        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 100%;
            max-width: 500px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 25px;
            color: #2c3e50;
            font-size: 24px;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        
        input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
        }
        
        button {
            width: 100%;
            padding: 12px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-bottom: 20px;
        }
        
        button:hover {
            background-color: #2980b9;
        }
        
        .results-container {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .result-box {
            flex: 1;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 5px;
            text-align: center;
            display: none;
        }
        
        .result-box h3 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 16px;
        }
        
        .result-value {
            font-size: 24px;
            font-weight: bold;
            color: #e74c3c;
        }
        
        .formulas {
            margin-top: 25px;
            padding: 15px;
            background-color: #f1f8e9;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .formula-item {
            margin-bottom: 10px;
            padding-left: 10px;
            border-left: 3px solid #7cb342;
        }
        
        .formula-item:last-child {
            margin-bottom: 0;
        }
        
        .error {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        
        .note {
            margin-top: 15px;
            font-size: 13px;
            color: #777;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>条料冲剪计算器</h1>
        
        <div class="input-group">
            <label for="length">片长 (mm)</label>
            <input type="number" id="length" placeholder="请输入片长" min="0" step="any">
            <div class="error" id="length-error">请输入有效的片长数值</div>
        </div>
        
        <div class="input-group">
            <label for="thickness">片厚 (mm)</label>
            <input type="number" id="thickness" placeholder="请输入片厚" min="0" step="any">
            <div class="error" id="thickness-error">请输入有效的片厚数值</div>
        </div>
        
        <div class="input-group">
            <label for="materialThickness">条料厚度 (mm)</label>
            <input type="number" id="materialThickness" placeholder="请输入条料厚度" min="0" step="any">
            <div class="error" id="materialThickness-error">请输入有效的条料厚度数值</div>
        </div>
        
        <button id="calculate">计算</button>
        
        <div class="results-container">
            <div class="result-box" id="result-pieces">
                <h3>该卷条料可冲剪片数</h3>
                <div class="result-value" id="result-pieces-value">0</div>
            </div>
            
            <div class="result-box" id="result-length">
                <h3>该卷条料长度(米)</h3>
                <div class="result-value" id="result-length-value">0</div>
            </div>
        </div>
        
        <div class="formulas">
            <div class="formula-item">
                可冲剪片数计算公式: K = (πx² + 500πx) ÷ (h·l)<br>
                其中: K-该卷条料可冲剪片数, x-条料厚度, h-片厚, l-片长
            </div>
            <div class="formula-item">
                条料长度计算公式: L = (πx² + 500πx) ÷ h<br>
                其中: L-条料长度(毫米), x-条料厚度, h-片厚
            </div>
        </div>
        
        <div class="note">
            注: 计算结果已四舍五入为整数，该数据仅作理论参考
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calculateBtn = document.getElementById('calculate');
            const resultPieces = document.getElementById('result-pieces');
            const resultPiecesValue = document.getElementById('result-pieces-value');
            const resultLength = document.getElementById('result-length');
            const resultLengthValue = document.getElementById('result-length-value');
            
            calculateBtn.addEventListener('click', function() {
                // 获取输入值
                const length = parseFloat(document.getElementById('length').value);
                const thickness = parseFloat(document.getElementById('thickness').value);
                const materialThickness = parseFloat(document.getElementById('materialThickness').value);
                
                // 验证输入
                let isValid = true;
                
                if (isNaN(length) || length <= 0) {
                    document.getElementById('length-error').style.display = 'block';
                    isValid = false;
                } else {
                    document.getElementById('length-error').style.display = 'none';
                }
                
                if (isNaN(thickness) || thickness <= 0) {
                    document.getElementById('thickness-error').style.display = 'block';
                    isValid = false;
                } else {
                    document.getElementById('thickness-error').style.display = 'none';
                }
                
                if (isNaN(materialThickness) || materialThickness <= 0) {
                    document.getElementById('materialThickness-error').style.display = 'block';
                    isValid = false;
                } else {
                    document.getElementById('materialThickness-error').style.display = 'none';
                }
                
                // 如果输入有效，进行计算
                if (isValid) {
                    // 计算公式: K=(πx²+500πx)÷(hl)
                    const numerator = Math.PI * Math.pow(materialThickness, 2) + 500 * Math.PI * materialThickness;
                    const piecesResult = numerator / (thickness * length);
                    
                    // 计算条料长度: L=(πx²+500πx)÷h
                    const lengthResult = numerator / thickness;
                    
                    // 显示结果（四舍五入到整数）
                    resultPiecesValue.textContent = Math.round(piecesResult);
                    resultPieces.style.display = 'block';
                    
                    // 显示条料长度（转换为米并四舍五入到整数）
                    resultLengthValue.textContent = Math.round(lengthResult / 1000);
                    resultLength.style.display = 'block';
                } else {
                    resultPieces.style.display = 'none';
                    resultLength.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>